<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/common.css">
  <title>Document</title>
</head>

<body>
  <!-- 顶点着色器 -->
  <script type="shader-source" id="vertexShader">
    //设置浮点数精度为中等精度
    precision mediump float;
    //接收点在 canvas 坐标系上的坐标 (x, y)
    attribute vec2 a_Position;
    //接收 canvas 的宽高尺寸
    attribute vec2 a_Screen_Size;
    void main(){
        //start 将屏幕坐标系转化为裁剪坐标（裁剪坐标系）
       vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0; 
       position = position * vec2(1.0, -1.0);
       gl_Position = vec4(position, 0, 1);
       //end 将屏幕坐标系转化为裁剪坐标（裁剪坐标系）
       //声明要绘制的点的大小。
       gl_PointSize = 10.0;
    }
    
	</script>
  <!-- 片元着色器  -->
  <script type="shader-source" id="fragmentShader">
    //设置浮点数精度为中等精度
    precision mediump float;
    //接收 JavaScript 传过来的颜色值（RGBA）。
    uniform vec4 u_Color;
    void main(){
        //将普通的颜色表示转化为 WebGL 需要的表示方式，即将【0-255】转化到【0,1】之间。
       vec4 color = u_Color / vec4(255, 255, 255, 1);
       gl_FragColor = color; 
    }
    
	</script>


  <canvas id="canvas"></canvas>
  <div class="tips">点击屏幕试一下</div>

  <script src="../utils/webgl-helper.js"></script>
  <script>
    var canvas = getCanvas('#canvas')
    resizeCanvas(canvas)
    var gl = getWebGLContext(canvas)
    // 获取顶点着色器源码
    var vertexShader = createShaderFromScript(gl, gl.VERTEX_SHADER, 'vertexShader');
    // 获取片元着色器源码
    var fragmentShader = createShaderFromScript(gl, gl.FRAGMENT_SHADER, 'fragmentShader');
    //创建着色器程序
    var program = createProgramFromString(gl, vertexShader, fragmentShader);
    // 使用刚创建好的着色程序
    gl.useProgram(program)
    // 开始绘制
    //设置清空画布颜色为黑色。
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    //用上一步设置的清空画布颜色清空画布。
    gl.clear(gl.COLOR_BUFFER_BIT);
    //绘制点。
    // gl.drawArrays(gl.POINTS, 0, 1);
  </script>
</body>

</html>
